<template>
	<!-- 购物车提交订单 -->
	<view class="container">
		<view class="yh-pd30">
			<view v-if="!addressInfo.address_id" @click="pageJumps('/pages/mine/addressList')"
				class="yh-h88 level_align flex_between yh-bgf yh-fc000 yh-fz28 yh-br12 yh-ptb0lr30">
				<view class="ellispsis1 flex-1 yh-mr20">
					请选择收货地址
				</view>
				<uni-icons type="arrowright" size="18" color="#999999"></uni-icons>
			</view>
			<view v-else @click="pageJumps('/pages/mine/addressList')"
				class="yh-bgf yh-bs-tc level_align flex_between yh-mt20 yh-pd30">
				<view class="">
					<view class="level_align yh-fw600 yh-fz34">
						<text class="yh-mr30">{{ addressInfo.name || ''}}</text>
						<text>{{ addressInfo.phone || ''}}</text>
					</view>
					<view class="yh-fc666 yh-mt10 yh-lh44">
						{{addressInfo.Area.province + addressInfo.Area.city + addressInfo.Area.region + addressInfo.detail }}
					</view>
				</view>
				<!-- 待支付订单可以选择地址 -->
				<!-- <uni-icons type="arrowright" size="18" color="#999"></uni-icons> -->
			</view>

			<view class="yh-mt20" v-for="(model,orderIndex) in goodsList" :key="orderIndex">
				<view class="level_align flex_between yh-pd30 yh-bgf yh-bdbm yh-br-t-lr12">
					<view class="yh-mr30 yh-pr">
						<view class=" yh-zi10 yh-bcF5">
							<image class="yh-w160 yh-h160" :src="model.image" mode="aspectFill"></image>
						</view>
					</view>
					<view class="flex flex_column flex-1">
						<view class="yh-fc333 yh-fz32 yh-fw600 ellispsis2 yh-lh44">
							{{ model.goods_name || ''}}
						</view>
						<view class="level_align flex_between yh-mt20">
							<view class="level_align">
								<view class="yh-red yh-mr30 yh-fz34">
									￥{{ model.goods_price || '' }}
								</view>
							</view>
							<view class="yh-fc999">
								× {{ model.total_num }}
								<!-- <tui-numberbox :max="99" :min="1" :value="goodsInfo.value" @change="change">
								</tui-numberbox> -->
							</view>
						</view>
					</view>
				</view>

				<!-- 规格 S -->
				<view v-for="(it,ind) in model.spec_attr" :key="ind"
					class="level_align flex_between yh-ptb0lr30 yh-h88 yh-bgf yh-bdbm">
					<view class="">
						{{it.spec_name}}
					</view>
					<view class="yh-fc666">
						{{it.spec_value}}
					</view>
				</view>
				<!-- 规格 E -->

				<view class="level_align flex_between yh-ptb0lr30 yh-h88 yh-bgf yh-br-b-lr12">
					<view class="">
						商品金额
					</view>
					<view class="yh-red">
						￥{{ model.total_price  || '' }}
					</view>
				</view>
			</view>

			<view class="yh-mt20">
				<view @click="couponShow = true"
					class="level_align flex_between yh-ptb0lr30 yh-h88 yh-bdbm yh-bgf yh-br-t-lr12">
					<view class="">
						优惠券
					</view>
					<view class="level_align" :class="{'yh-red' : couponInfo.id}">
						{{ couponInfo.id ? '-￥' + couponInfo.number: '选择优惠券'}}
						<uni-icons type="arrowright" size="18" color="#999999"></uni-icons>
					</view>
				</view>
				<view class="level_align flex_between yh-ptb0lr30 yh-h88 yh-bgf yh-br-b-lr12">
					<view class="">
						运费1
					</view>
					<view class="yh-fc999">
						{{ emsMoney == 0 ? '免运费' : (emsMoney || '') + '元' }}
					</view>
				</view>
				<view class="level_align flex_between yh-ptb0lr30 yh-h88 yh-bgf yh-br-b-lr12">
					<view class="">
						收货方式
					</view>
					<view class="yh-fc999">
						<view @click="clone_type(1)" :style="color1" style="border-radius: 0.5em;padding: 5px 10px 5px 10px;float: left;color: #fff;">到店自取</view>
						
						<view @click="clone_type(2)" :style="color2" style="border-radius: 0.5em;padding: 5px 10px 5px 10px;float: left;color: #fff;margin-left: 5px;">快递</view>
					</view>
				</view>
			</view>

			<view class="yh-br12 yh-bgf yh-pd30 yh-mt20">
				<view class="yh-fw600 yh-fz32 yh-lh54">
					备注
				</view>
				<view class="yh-mt10">
					<textarea value="" style="height: 200rpx;" v-model="beizhu" placeholder="备注信息"
						class="yh-bcF5 yh-w100 yh-pd20" />
				</view>
			</view>
			<!-- <view class="yh-fc-orange yh-mt20 yh-mb30">
				支付成功后赠送{{ spGoodsInfo.integral }}积分，退货积分收回！
			</view> -->

		</view>


		<view class="yh-btn-h100 level_align yh-zi10 flex_between yh-bgf yh-h102 yh-bdtp yh-ptb0lr30">
			<view class="level_align yh-fc999">
				<text class="yh-fc999">合计：</text><text class="yh-red yh-fz36">￥ {{totalMoney}}</text>
			</view>
			<tui-button @click="btnPay" width="200rpx" height="70rpx" :size="28" type="danger" shape="circle">提交订单
			</tui-button>
		</view>

		<t-select-coupons :show="couponShow" :couponList="couponList" @close="couponShow = false"
			@selectCoupon="selectCoupon"></t-select-coupons>
		<select-pay ref="selectPayPop" @closePay="closePay" :totalMoney="totalMoney" @confirm="payConfirm"></select-pay>
	</view>
</template>

<script>
	import tSelectCoupons from "@/components/t-select-coupons/t-select-coupons"
	import selectPay from '@/components/selectPay.vue'
	export default {
		components: {
			tSelectCoupons,
			selectPay
		},
		data() {
			return {
				hasCoupon: true, // 有优惠券
				couponShow: false, // 优惠券弹框
				couponList: [], // 可用优惠券列表
				couponInfo: {}, // 选择的优惠券
				curPayType: 'balance', // 当前支付方式：balance余额 | 微信wechat | 支付宝alipay
				goodsList: [], // 商品基本信息
				goodsInfo: {}, // 商品基本信息
				// select_sp_ids: [], // 选择的规格id
				// spGoodsInfo: {}, // 选择的规格信息
				// spec_attr: {}, // // 规格列表

				addressInfo: {}, // 地址信息
				beizhu: '', // 备注
				emsMoney: 0, // 运费
				clone_index:1,
				color1:"background: #3d3d3d;",
				color2:"background: #cecece;",
			};
		},
		onLoad(opt) {
			if (uni.getStorageSync('cartGoodsList')) {
				this.goodsList = uni.getStorageSync('cartGoodsList')
			} else {
				this.pageBack()
			}
			// this.goodsList = opt.goods && JSON.parse(decodeURIComponent(opt.goods))
			// this.select_sp_ids = opt.spIds && JSON.parse(opt.spIds)
			// this.spGoodsInfo = opt.spGoodsInfo && JSON.parse(opt.spGoodsInfo)
			// this.spec_attr = opt.spec_attr && JSON.parse(opt.spec_attr)
			this.getCouponList()
			this.getGetdefaultAddress()
		},
		onShow() {
			if (uni.getStorageSync('temporary_adderss')) {
				this.addressInfo = uni.getStorageSync('temporary_adderss')
				this.getEmsMoney()
			}
		},
		onUnload() {
			uni.removeStorageSync('temporary_adderss')
			uni.removeStorageSync('cartGoodsList')
		},
		computed: {
			totalMoney() {
				let money = 0;
				if (this.goodsList.length) {
					this.goodsList.forEach(item => {
						money += item.total_price
						// money += item.ems
					})
				}
				money += Number(this.emsMoney)
				if (this.couponInfo.id) {
					money -= Number(this.couponInfo.number)
				}
				return money
			}
		},
		methods: {
			clone_type(type){
				
				this.clone_index = type;
				this.color1 = "background: #cecece;";
				this.color2 = "background: #cecece;";
				if(type == 1){
					this.color1 = "background: #3d3d3d;";
				}else{
					this.color2 = "background: #3d3d3d;";
				}
			},
			// 数量加减
			change: function(e) {
				this.goodsInfo.value = e.value;
				this.getCouponList()
			},
			// 获取可用优惠券
			getCouponList() {
				let money = 0;
				if (this.goodsList.length) {
					this.goodsList.forEach(item => {
						money += item.total_price
						// money += item.ems
					})
				}
				money += Number(this.emsMoney)
				this.$http.get(this.$api.couponGetList, {
					is_used: 1,
					page: 1,
					size: 100,
					money: money
				}).then(res => {
					if (res.code === 1) {
						this.couponList = res.data.data
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
					}
				})
			},
			// 获取运费
			getEmsMoney() {
				this.$http.get(this.$api.ems_money, {
					aid: this.addressInfo.address_id && this.addressInfo.address_id,
				}).then(res => {
					if (res.code === 1) {
						this.emsMoney = res.data.money || 0
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
					}
				})
			},
			// 获取默认地址
			getGetdefaultAddress() {
				this.$http.get(this.$api.addressGetdefault).then(res => {
					if (res.code === 1) {
						this.addressInfo = res.data
						this.getEmsMoney()
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
					}
				})
			},
			selectCoupon(e) {
				this.couponInfo = e
				// console.log(e);
			},
			// 点击提交
			btnPay() {
				
				if(this.clone_index == 2 && this.addressInfo == null){
			
						return uni.showToast({
							title: '请选择地址',
							icon: 'none'
						})
				
				}
				
				this.$refs.selectPayPop.open()
			},
			// 取消支付，生成待支付订单，去订单列表
			closePay() {
				this.pageJumps('/pages/mine/orderList')
			},
			// 确认支付，成功之后去订单列表
			payConfirm({payType,code}) {
				// console.log(payType);
				uni.showLoading({
					title: '加载中...'
				})
				let arr = [];
				this.goodsList.forEach(item => {
					let obj = {
						goods_id: item.goods_id,
						goods_sku_id: item.goods_sku_id
					}
					arr.push(obj)
				})
				
				console.log(this.addressInfo,999999999);
				var address_id = 0;
				
				if(this.addressInfo && this.addressInfo != null){
					address_id = this.addressInfo.address_id
				}
			
				
				this.$http.post(this.$api.buyNowPayCard, {
					coupon_id: this.couponInfo.id && this.couponInfo.id || '',
					type: payType,
					goods_str: arr,
					code:code,
					card_id:uni.getStorageSync('bankMessage').id,
					aid: address_id,
					beizhu: this.beizhu,
					clone_index:this.clone_index,
				}).then(res => {
					uni.hideLoading()
					if (res.code === 1) {
						let pay = res.data
						if (payType === 'wx') {
							uni.requestPayment({
								provider: 'wxpay',
								timeStamp: pay.timeStamp,
								nonceStr: pay.nonceStr,
								package: pay.package,
								signType: pay.signType,
								paySign: pay.paySign,
								success: (res) => { // 微信支付成功就跳转详情
									uni.showToast({
										title: res.msg,
										icon: 'success',
										mask: true
									})
									setTimeout(() => {
										uni.reLaunch({
											url: '/pages/mine/myOrderList'
										})
										// this.pageJumps('/pages/mine/myOrderList')
									}, 600)
								},
								fail(err) {
									console.log('fail:' + JSON.stringify(err));
								}
							});
						} else if (payType === 'wxapp') {
							uni.requestPayment({
								provider: 'wxpay',
								orderInfo: pay,
								success: () => {
									uni.showToast({
										title: res.msg,
										icon: 'success',
										mask: true
									})
									setTimeout(() => {
										uni.reLaunch({
											url: '/pages/mine/myOrderList'
										})
										// uni.redirectTo({
										// 	url: "/pages/mine/myOrderList"
										// })
									})
								},
								fail: (res) => {
									console.log('支付错误', JSON.stringify(res));
								},
								complete: (res) => {
									console.log('调用结束', JSON.stringify(res));
								}
							})
						} else if (payType === 'zfb') { // 支付宝支付
							uni.requestPayment({
								provider: 'alipay',
								orderInfo: pay,
								success: () => {
									uni.showToast({
										title: res.msg,
										icon: 'success',
										mask: true
									})
									setTimeout(() => {
										uni.reLaunch({
											url: '/pages/mine/myOrderList'
										})
										// uni.redirectTo({
										// 	url: "/pages/mine/myOrderList"
										// })
									})
								},
								fail: (res) => {
									console.log('支付错误', JSON.stringify(res));
								},
								complete: (res) => {
									console.log('调用结束', JSON.stringify(res));
								}
							})
						} else if (payType === 'yhk') {
							console.log(res);
							if (res.code === 1) {
								uni.showToast({
									title: res.msg,
									icon: 'success',
									mask: true
								})
								setTimeout(() => {
									uni.reLaunch({
										url: '/pages/mine/myOrderList'
									})
								})
							}
						} else {
							uni.showToast({
								title: res.msg,
								icon: 'success',
								mask: true
							})
							setTimeout(() => {
								uni.reLaunch({
									url: '/pages/mine/myOrderList'
								})
								// this.pageJumps('/pages/mine/myOrderList')
							}, 600)
						}
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
					}
				})

			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #F5F5F5;
	}

	.container {
		padding-bottom: 98rpx;
	}
</style>
